<!-- MP4资源管理
<template>
    <div id="template">
        <page-main>
            <avue-crud
                v-model="Main_Form"
                :option="Main_Option"
                :data="Main_Data"
                :page.sync="Main_Page"
                :search.sync="Main_search"
                :table-loading="main_table_loading"
                ref="crud"
                @refresh-change="refreshChange"
                @search-change="searchChange"
                @reset-change="resetChange"
                @row-save="rowSave"
                @row-update="rowUpdate"
                @current-change="currentChangeMain"
                @size-change="sizeChangeMain"
                @row-del="rowDel"
            >
                <template slot="url" slot-scope="{ row }">
                    <span
                        style="color: #2d7ad6; cursor: pointer;"
                        @click="openPreview(row.url || '')"
                        >{{ row.url || "" }}</span
                    >
                </template>
                <template slot-scope="{ size, row, index }" slot="menu">
                    <el-button
                        :size="size"
                        type="text"
                        @click="editBtn(row, index)"
                        >编辑</el-button
                    >
                    <el-button :size="size" type="text" @click="rowDel(row)"
                        >删除</el-button
                    >
                </template>
            </avue-crud>
        </page-main>
    </div>
</template>

<script>
import { Main_Option, Main_Data } from "./config";
import {
    queryResourceApi,
    createResourceApi,
    updateResourceApi,
    deleteResourceApi
} from "@/api/resource/index";

export default {
    data() {
        return {
            Main_Option,
            Main_Data,
            main_table_loading: false,
            Main_Form: {},
            Main_search: {},
            Main_Page: {
                currentPage: 1,
                pageSize: 10,
                total: 1
            }
        };
    },
    mounted() {
        this.getHomePageInfoFunc();
    },
    methods: {
        //
        currentChangeMain(val) {
            this.Main_Page.currentPage = val;
            this.getHomePageInfoFunc();
        },
        //
        sizeChangeMain(val) {
            this.Main_Page.pageSize = val;
            this.getHomePageInfoFunc();
        },
        openPreview(url) {
            this.$ImagePreview(
                [
                    {
                        thumbUrl: process.env.VUE_APP_API_ROOT + url,
                        url: process.env.VUE_APP_API_ROOT + url,
                        type: "video"
                    }
                ],
                0,
                {
                    closeOnClickModal: true
                }
            );
        },
        // 搜索事件
        async searchChange(params, done) {
            await this.getHomePageInfoFunc();
            done();
        },
        // 重置
        resetChange() {
            this.Main_search = {};
        },
        // 刷新
        refreshChange() {
            this.Main_Page.currentPage = 1;
            this.getHomePageInfoFunc();
        },
        editBtn(row, index) {
            const data = JSON.parse(JSON.stringify(row));
            data && data.url ? (data["fileURL"] = [data.url]) : "";
            this.$refs.crud.rowEdit(data, index);
        },

        rowSave(form, done, loading) {
            const { name, fileURL, remarks } = form;
            this.createResourceApiFunc(
                {
                    name,
                    classificate: 2,
                    url: fileURL && fileURL.length > 0 ? fileURL[0] : "",
                    remarks
                },
                done,
                loading
            );
        },

        rowUpdate(row, index, done, loading) {
            const { id, name, fileURL, remarks } = row;
            this.updateResourceApiFunc(
                {
                    id,
                    name,
                    url: fileURL && fileURL.length > 0 ? fileURL[0] : "",
                    remarks
                },
                done,
                loading
            );
        },

        rowDel(row) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.deleteResourceApiFunc({ id: row?.id ?? "" });
                })
                .catch(() => {
                    this.$message.info("已取消");
                });
        },

        /**
         * @name requests
         * @author --h28
         */
        // 获取主页
        async getHomePageInfoFunc() {
            this.main_table_loading = true;
            const response = await queryResourceApi({
                ...this.Main_search,
                currentPage: this?.Main_Page?.currentPage ?? 1,
                pageSize: this?.Main_Page?.pageSize ?? 10,
                classificate: 2
            }).catch(() => {});

            if (response?.code === 200) {
                this.Main_Data = response?.data?.records ?? [];
                this.Main_Page.total = response?.data?.total ?? 0;
            }
            this.main_table_loading = false;
        },
        // 新增
        async createResourceApiFunc(data, done, loading) {
            const response = await createResourceApi(data).catch(() => {});
            if (response?.code === 200) {
                this.$notify.success({ title: "提示", message: "新增成功" });
                this.Main_Page.currentPage = 1;
                this.getHomePageInfoFunc();
                done();
            }
            loading();
        },
        // 编辑
        async updateResourceApiFunc(data, done, loading) {
            const response = await updateResourceApi(data).catch(() => {});
            if (response?.code === 200) {
                this.$notify.success({ title: "提示", message: "编辑成功" });
                this.getHomePageInfoFunc();
                done();
            }
            loading();
        },
        // 删除
        async deleteResourceApiFunc(data) {
            const loadding = this.$loading({
                lock: true,
                text: "加载中...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            const response = await deleteResourceApi(data).catch(() => {});
            if (response?.code === 200) {
                this.$notify.success({ title: "提示", message: "删除成功" });
                this.Main_Page.currentPage = 1;
                this.getHomePageInfoFunc();
            }
            loadding.close();
        }
    }
};
</script>

<style>

  </style> -->
